<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="活动详情" autoBack>
			</u-navbar>
		</view>


		<view class="con-body" style="background-color: #fff;">
			<view>
				<u-image :src="detail.image" width="100%" height="300rpx"></u-image>
			</view>
			<view style="padding: 20rpx;">
				<view class="u-flex u-row-between" style="padding:20rpx 0;">
					<view style="font-size: 42rpx; font-weight: 600;">
						{{detail.title}}
					</view>
					<view v-if="detail.free == 0" style="color: red; font-size: 28rpx;">
						免费
					</view>
					<view v-else style="color: red; font-size: 28rpx;">
						{{detail.price}}元/人
					</view>
				</view>
				
				<view v-if="detail.limit !== 0"
					style="background-color: #EEEEEE; padding: 20rpx; border-radius: 10rpx; margin-top: 10rpx;font-size: 28rpx;">
					<text>限制{{detail.limit}}个名额（已参与{{detail.join}}人）</text>
				</view>
				<view v-else
					style="background-color: #EEEEEE; padding: 20rpx; border-radius: 10rpx; margin-top: 10rpx;font-size: 28rpx;">
					<text>不限制人数（已参与{{detail.join}}人）</text>
				</view>

				<view>
					<view class="d_title">
						活动地址:
					</view>
					<view class="d_content">
						{{detail.address}}
					</view>
					<view class="d_title">
						活动时间:
					</view>
					<view class="d_content">
						开始时间：{{detail.time}}
					</view>
					<view class="d_content">
						结束时间：{{detail.end_time}}
					</view>
					<view class="d_content">
						报名截止：{{detail.time}}
					</view>
					<view class="d_title">
						注意事项:
					</view>
					<view class="d_content">
						{{detail.matter}}
					</view>
					
					<view class="d_title">
						活动详情:
					</view>
					<view class="d_content">
						<u-parse :content="detail.content"></u-parse>
					</view>
				</view>
				
				<u-button :customStyle="btnStyle" @click="join">立即参与</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { getDetail } from "@/service/communitService.js";
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginTop: '40rpx',
					marginBottom: '40rpx',
					backgroundImage: "url('https://s4.ax1x.com/2022/02/22/HxzlJf.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				},
				gid: 0,
				detail: {}
			}
		},
		onLoad(options) {
			this.gid = options.gid;
			getDetail({gid: this.gid}).then(this.getDetail);
		},
		methods: {
			getDetail(e){
				if(e.code == 200){
					this.detail = e.result;
				}
			},
			join() {
				this.$u.route({
					url: '/pagesCommunity/index/active-join',
					params: {
						gid: this.gid
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.d_title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		margin: 20rpx 0;
	}

	.d_content {
		color: #636363;
		font-size: 28rpx;
		margin-top: 5rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}
</style>
